<script setup lang="ts">
import { MainLayout } from '~/components/MainLayout';
import LayoutCol from '~/components/MainLayout/layoutCol.vue';
const headers = [
    { title: '尺寸', key: 'name' },
    { title: '100', key: 'calories' },
    { title: '200', key: 'fat' },
    { title: '300', key: 'carbs' },
    { title: '400', key: 'protein' },
    { title: '500', key: 'iron1' },
    { title: '600', key: 'iron2' },
    { title: '700', key: 'iron3' },
    { title: '800', key: 'iron4' },
    { title: '900', key: 'iron5' },
]
const items = new Array(10).fill({
    name: '1.5英寸',
    calories: '1.5美元',
    fat: '0.4美元',
    carbs: '3.6美元',
    protein: '2.9美元',
    iron1: '15%',
    iron2: '15%',
    iron3: '15%',
    iron4: '15%',
    iron5: '15%',
})
</script>

<template>
    <MainLayout :maxwidth="false" startColor="2">
        <LayoutCol>
            <div class="flex flex-wrap items-start justify-between sm:flex-nowrap py-6!">
                <div class="max-w-lg flex-grow prose-h3:mt-0 prose-h3:text-3xl prose-h3:font-black text-left">
                    <h3>No Color (Die Struck) Coins</h3>
                    <p class="text-left text-14px text-[#666]">
                        With 50% Embroidery, your design is stitched onto a twill backing, covering50% or less of its
                        surface. ldeal for text-based designs such as name patches, itoffers simplicity and clarity,
                        keeping your patches classic and clean.
                    </p>
                    <div>
                        free
                    </div>
                </div>

                <img class="not-prose mx-auto mask-[url('/404/6.webp')] mask-size-contain" src="/404/6.webp" width="300"
                    height="238" alt="coin with no color">
            </div>
            <div class="text-left! whitespace-nowrap!">
                <v-data-table :headers="headers" :items="items" hide-default-footer> </v-data-table>
            </div>
        </LayoutCol>
        <LayoutCol>
            表单
        </LayoutCol>
    </MainLayout>
</template>


<style scoped>
:deep(thead) {
    tr {
        background-color: #ccc !important;
    }
}

:deep(tbody) {
    tr:nth-child(even) {
        /* tr:nth-child(odd) { */
        background-color: #E3F0FC !important;
    }
}
</style>